<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .topbox {
        width: 100%;
        height: 50px;
        background-color: #f0f0f0;
        text-align: center;
        line-height: 50px;
        border-bottom: 2px solid #ccc;
        font-weight: 900;
      }
      .content {
        width: 100%;
        height: 50px;
        /* text-align: center;
        line-height: 50px; */
        border-bottom: 2px solid #ccc;
        background-color: #fff;
       
      }
      .signature {
        font-size: 12px;
      }
      .name {
        font-weight: 900;
      }
      .num {
        float: right;
      }
      .box{
          height: 250px;
          overflow: hidden;
      }

      /* .fade-leave-active{
            animation: move-out 1s;
        }
        @keyframes move-out {
            0%{ height: 100px; }
        
            100%{ height: 0; }
        } */

        /* .fade-leave,
        .fade-enter-to{
           height: 250px;
        } */
      .fade-leave-to,
      .fade-enter {
        height: 0 !important ;
      }

      .fade-leave-active,
      .fade-enter-active {
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <my-div :lists="lists"></my-div>
    </div>

    <script id="my-div" type="text/html">
      <div>
          <div v-for="(list, index) in lists" :key="index">
              <div class="topbox" @click="open($event,index)">
                  {{list.title}}
                    <span class="num">{{list.msg.length}}</span>
             </div>
                <transition name="fade">
                 <div class="box" v-if="lists[index].show" :style="height" >
                    <div  v-for="(name, index) in list.msg" :key="index" class='content'>
                        <div class="name"> {{name.people}}</div>
                        <p class="signature" >{{name.signature}}</p>
                     </div>
                </div>
              </transition>

          </div>
      </div>
    </script>

    <script>
      Vue.component("my-div", {
        template: "#my-div",
        props: ["lists"],
        data() {
          return {};
        },
        methods: {
          open(ev, index) {
            this.lists[index].show = !this.lists[index].show;
          },
        },
        computed: {
          updown() {
            for (var i = 0; i < this.lists.msg; i++) {
              console.log(this.lists.msg);
              if (this.lists.msg.zx == true) {
                var n = 1;
                return n;
              }
            }
          },
          height(){
            return{
              height:this.lists.msg.length * 50+'px'
            }
          }
        },
      });

      let app = new Vue({
        el: "#app",
        data: {
          lists: [
            {
              title: "家人",
              show: false,
              msg: [
                {
                  people: "爷爷",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "奶奶",
                  signature: "今天不错",
                  zx: true,
                },
                {
                  people: "爸爸",
                  signature: "昨天天气好",
                  zx: true,
                },
                {
                  people: "妈妈",
                  signature: "每天天气好",
                  zx: false,
                },
              ],
            },
            {
              title: "朋友",
              show: false,
              msg: [
                {
                  people: "吴彦祖",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "刘德华",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "周杰伦",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "黄渤",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "黄磊",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "吴京",
                  signature: "今天天气好",
                  zx: true,
                },
              ],
            },
            {
              title: "同学",
              show: false,
              msg: [
                {
                  people: "马云",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "马化腾",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "任正非",
                  signature: "今天天气好",
                  zx: true,
                },
                {
                  people: "陈睿",
                  signature: "今天天气好",
                  zx: true,
                },
              ],
            },
          ],
        },
      });
    </script>
  </body>
</html>
